<template>
	<view>
		<!-- uview图片上传 -->
		<view class="applyFor-form-con applyFor-form-conFlex">
			<view class="applyFor-form-conLi">
				<view class="pre-box" v-if="!upload1.showUploadList">
					<view class="pre-item" v-for="(item, index) in upload1.lists" :key="index">
						<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
						<view class="u-delete-icon" @tap.stop="deleteItem(index,'uUpload')">
							<uni-icons type="closeempty" size="15" color="#fff"></uni-icons>
						</view>
					</view>
				</view>
				<u-upload :custom-btn="true"  ref="uUpload" :deletable="true" :show-upload-list="upload1.showUploadList" @on-uploaded="onUploaded" max-count="1" :header="header"  :before-upload="beforeUpload" :action="action" :show-tips="false"> 
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"></view>
				</u-upload>
				
				<view class="textStyle">身份证人面像</view>
				<uni-view v-if="errorData.idCardError" class="u-form-item__message">{{errorData.idCardError}}</uni-view>
			</view>
			<view class="applyFor-form-conLi">
				<view class="pre-box" v-if="!upload2.showUploadList">
					<view class="pre-item" v-for="(item, index) in upload2.lists" :key="index">
						<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
						<view class="u-delete-icon" @tap.stop="deleteItem(index,'uUpload2')">
							<uni-icons type="closeempty" size="15" color="#fff"></uni-icons>
						</view>
					</view>
				</view>
				
				<u-upload :custom-btn="true" ref="uUpload2" :show-upload-list="upload2.showUploadList"  max-count="1" :before-upload="beforeUpload2" :action="action" :show-tips="false" :header="header"  @on-uploaded="onUploadedtwo"> 
					<view slot="addBtn" class="slot-btn slot-btn2" hover-class="slot-btn__hover" hover-stay-time="150"></view>
				</u-upload>
				
				<view class="textStyle">身份证国徽面</view>
				<uni-view v-if="errorData.idCardError2" class="u-form-item__message">{{errorData.idCardError2}}</uni-view>
			</view>
			<view class="applyFor-form-conLi">
				<view class="pre-box" v-if="!upload3.showUploadList">
					<view class="pre-item" v-for="(item, index) in upload3.lists" :key="index">
						<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
						<view class="u-delete-icon" @tap.stop="deleteItem(index,'uUpload3')">
							<uni-icons type="closeempty" size="15" color="#fff"></uni-icons>
						</view>
					</view>
				</view>
				
				<u-upload :custom-btn="true" ref="uUpload3" :show-upload-list="upload2.showUploadList" max-count="1" :before-upload="beforeUpload3" :action="action" :show-tips="false" :header="header" @on-uploaded="onUploadedthree"> 
					<view slot="addBtn" class="slot-btn slot-btn3" hover-class="slot-btn__hover" hover-stay-time="150"></view>
				</u-upload>
				<view class="textStyle">证书</view>
				<uni-view v-if="errorData.idCardError3" class="u-form-item__message">{{errorData.idCardError3}}</uni-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"uviee-pictures",
		data() {
			return {
				upload1: {   //正面身份证
				  action: '', // 上传地址
				  showUploadList: false, 
				  lists: []
				},
				upload2: {   //反面身份证
				  action: '', // 第二个上传地址
				  showUploadList: false, 
				  lists: []
				},
				upload3: {   //证件
				  action: '', // 第二个上传地址
				  showUploadList: false, 
				  lists: []
				},
				header:{
					'Tenant-Id':'1590229800633634816',
					'hx-token': uni.getStorageSync('hx-token') ? uni.getStorageSync('hx-token') : null, // 请求token
					'timestamp': new Date().getTime(),
					//#ifdef MP-WEIXIN
					'client-type': 'WX-MA', //客户端微信小程序
					'app-id': uni.getAccountInfoSync().miniProgram.appId, //小程序appId
					//#endif
					//#ifdef APP-PLUS
					'client-type': 'APP', //客户端类型APP
					//#endif
					//#ifdef H5
					'client-type': 'H5', //客户端H5
					//#endif
					//#ifdef MP-ALIPAY
					'client-type': 'ALI-MA', //客户端支付宝小程序
					'app-id': config.aliAppId, //小程序appId
					//#endif
				},
				action:'/mallapi/file/upload',  //config.basePath +'/mallapi/file/upload   线上
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.upload1.lists = this.$refs.uUpload.lists;
			this.upload2.lists = this.$refs.uUpload2.lists;
			this.upload3.lists = this.$refs.uUpload3.lists;
			this.getSkillCategoryList(this.categoryId)
		},
		watch:{
			'upload1.lists': function(newVal) {
			  if (newVal.length > 0) {
				this.errorData.idCardError = '';
			  }else{
				this.errorData.idCardError = '请上传身份证人面像' 
			  }
			},
			'upload2.lists': function(newVal) {
			  if (newVal.length > 0) {
				this.errorData.idCardError2 = '';
			  }else{
				this.errorData.idCardError2 = '请上传证书'
			  }
			},
			'upload3.lists': function(newVal) {
			  if (newVal.length > 0) {
				this.errorData.idCardError3 = '';
			  }else{
				this.errorData.idCardError3 = '请上传证书'
			  }
			}
		},
	}
</script>

<style lang="scss">

</style>